<template>
    <ul class="prolist" :class="`col_`+ type">
        <li class="proItem" @click="toDetail(item.proid)" v-for="item of list" :key="item.proid">
            <div class="proImge">
                <van-image :src="item.img1" ></van-image>
            </div>
            <div class="proInfo">
                <h5 class="van-multi-ellipsis--l2">{{ item.proname }}</h5>
                <p>￥{{ item.originprice }}</p>
            </div>
        </li>
        <div class="changeIcon" @click="changeIcon">
            <van-icon v-if="type === 1" name="apps-o" size="36" />
        <van-icon v-else name="bars" size="36" />
    </div>
    </ul>
</template>

<script>
import Vue from 'vue'
import { Icon, Image as VanImage } from 'vant'
Vue.use(Icon)
Vue.use(VanImage)
export default {
  props: {
    list: Array
  },
  name: 'ProList',
  data () {
    return {
      type: 1
    }
  },
  methods: {
    changeIcon () {
      this.type = this.type === 1 ? 2 : 1
    },
    toDetail (proid) {
    // 编程式跳转
      // 路由其实可以看作是一个数组，数组的元素就是每一次操作的每一个路由
      // push一次，相当于给数组的最后面添加了一个元素，指针指向新添加的最后一个元素
      // replace一次，相当于替换了数组的最后一个元素，指针的位置并没有发生改变
      // back一次，相当于删掉了最后一个元素（不是真的删除），指针指向了倒数第二个元素
      // go一次，可以传入number类型的数字，值为正数，表示前进几步，值为负数，相当于后退几步
      this.$router.push({ name: 'detail', params: { proid } })
    }
  }
}
</script>

<style lang="stylus" scoped>
.prolist.col_2
    display flex
    flex-wrap wrap
    justify-content space-around
    background-color #F7F7F7
    .proItem
        width 46%
        height 2.5rem
        background-color #fff
        margin 10px 0px
        .proImge
            width 100%
            height 1.5rem
            overflow hidden
            .van-image
                height 100%
                width 100%
        .proInfo
            h5
               font-size 14px
               margin-top 20px
               color: #333
               white-space normal
               padding-left 10px
               padding-right 5px
               font-weight normal
               height 0.38rem
               text-align left
            p
               margin-top 10px
               padding-left 10px
               padding-right 5px
               font-weight normal
               color #e4393c
               font-size 18px
               text-align left
.prolist.col_1
    width 96%
    margin 0 auto
    background-color #F7F7F7
    overflow hidden
    .proItem
        width 95%
        margin 0 auto
        margin-top 10px
        height 1.3rem
        display flex
        background-color #fff
        .proImge
            width 40%
            height 1.3rem
            .van-image
                height 100%
                width 100%
        .proInfo
            flex 1
            height 1rem
            h5
               font-size 14px
               margin-top 20px
               color: #333
               white-space normal
               padding-left 10px
               padding-right 5px
               font-weight normal
               height 0.38rem
               text-align left
            p
               margin-top 10px
               padding-left 10px
               padding-right 5px
               font-weight normal
               color #e4393c
               font-size 18px
               text-align left
.changeIcon
  position fixed
  bottom 60px
  right 10px
  width 36px
  height 36px
  border 1px solid #efefef
  background-color #efefef
  border-radius 50%
</style>
